import React, { useState, useEffect, useRef } from 'react';
import { Row, Col } from 'antd';
import { getRealtimeData } from 'admin/servers/modules/DataStatistics';
import Countup from 'react-countup';

interface IProp {
  visible: boolean; // 计时器是否清除，为false停止
}

const TotalNums: React.FC<IProp> = (props: IProp) => {
  const [TotalNums, setTotalNums] = useState<any>({
    callCompleteNumber: 0,
    callNumber: 0,
    ratioAnswer: 0,
    callDurationTotal: 0,
    callDurationAverage: 0,
  });
  const timer = useRef<any>(null);

  useEffect(() => {
    // console.log(props.visible, "顶部统计数据-计时器-开关");
    clearInterval(timer.current);
    if (props.visible) {
      timer.current = setInterval(() => {
        getTotalNums();
      }, 1000); // 实时更新周期：1s更新一次
    }
  }, [props.visible]);
  const getTotalNums = () => {
    getRealtimeData()
      .then(res => {
        if (res.code === 0) {
          // mock:数字滚动--动效
          // res.data = {
          //   callCompleteNumber: 998,
          //   callNumber: 1230,
          //   ratioAnswer: 100,
          //   callDurationTotal: 19870,
          //   callDurationAverage: 18,
          // };
          // console.log("实时统计数据", res.data);
          setTotalNums(res.data);
        }
      })
      .catch(error => {
        console.error(`系统异常: ${JSON.stringify(error)}`);
      });
  };
  const { callCompleteNumber, callNumber, ratioAnswer, callDurationTotal, callDurationAverage } =
    TotalNums;
  // console.log(
  //   "实时统计数据",
  //   callCompleteNumber,
  //   callNumber,
  //   ratioAnswer,
  //   callDurationTotal,
  //   callDurationAverage
  // );
  return (
    <>
      <Row gutter={[8, 8]}>
        <Col className="column" span="4" offset={3}>
          已呼数
          <div>
            <Countup separator="," start={0} end={callCompleteNumber} />个
          </div>
        </Col>
        <Col className="column" span="4">
          接通数
          <div>
            <Countup start={0} end={callNumber} />个
          </div>
        </Col>
        <Col className="column" span="4">
          接通率
          <div>
            <Countup decimals={2} start={0} end={ratioAnswer} />%
          </div>
        </Col>
        <Col className="column" span="4">
          总通话时长
          <div>
            <Countup decimals={1} start={0} end={callDurationTotal} />
            小时
          </div>
        </Col>
        <Col className="column" span="5">
          平均通话时长
          <div>
            <Countup decimals={1} start={0} end={callDurationAverage} />秒
          </div>
        </Col>
      </Row>
    </>
  );
};
export default TotalNums;
